<template>
	<view class="pd16_15">
		<view class="box pd20_15">
			<view class="flex alcenter">
				<view class="ft14 cl-main" style="width: 144rpx;">
					门店名字
				</view>
				<view style="width: calc(100% - 144rpx);">
					<input :maxlength="64" v-model="form.mname" placeholder="输入门店名字"  class="ft14 cl-main inputh" placeholder-class="cl-notice" />
				</view>
			</view>
			<view class="bd-line"></view>
			<view class="flex alcenter">
				<view class="ft14 cl-main" style="width: 144rpx;">
					姓&emsp;&emsp;名
				</view>
				<view style="width: calc(100% - 144rpx);">
					<input :maxlength="64" v-model="name" placeholder="输入姓名"  class="ft14 cl-main inputh" placeholder-class="cl-notice" />
				</view>
			</view>
			<view class="bd-line"></view>
			<view class="flex alcenter">
				<view class="ft14 cl-main" style="width: 144rpx;">
					电&emsp;&emsp;话
				</view>
				<view style="width: calc(100% - 144rpx);">
					<input :maxlength="11" v-model="form.tel" type="number" placeholder="输入手机号"  class="ft14 cl-main inputh" placeholder-class="cl-notice" />
				</view>
			</view>
			<view class="bd-line"></view>
			<view class="flex alcenter">
				<view class="ft14 cl-main" style="width: 144rpx;">
					地&emsp;&emsp;址
				</view>
				<view @click="opdt()" style="width: calc(100% - 144rpx); position: relative;">
					<input :maxlength="64" :value="addss" placeholder="点击获取地址"  class="ft14 cl-main inputh" placeholder-class="cl-notice" />
					<text class="iconfont  iconicon_location02 ft22 mr10" style="position: absolute; top: 30upx; right: 0px; color: #999999;"></text>
				</view>
			</view>
			<view class="bd-line"></view>
			<view class="flex alcenter">
				<view class="ft14 cl-main" style="width: 144rpx;">
					详细地址
				</view>
				<view style="width: calc(100% - 144rpx);" >
					<input :maxlength="255" v-model="address_component.address" placeholder="输入详细地址"  class="ft14 cl-main inputh" placeholder-class="cl-notice" />
				</view>
			</view>	
		</view>
		<view class="mt24">
			<button class="btn-big" @click="postdata()" :style="getBtnStyle">确定</button>
		</view>
	</view>
</template>
<script>
export default {
		data(){
			return {
				address_id:0,
				form:{
					mname:'',
					name:'',
					tel:'',
					is_default:1,
					province:'',//省
					city:'',//市
					district:'',//区
					address:'',//详细地址
				},
				//defaultValue: ['山西省', '大同市', '南郊区'], // 默认值
				address:'',
				address_component:[],
				addss:'',
				name:'',
			}
		},
		onLoad(e){
			this.form=uni.getStorageSync("MendianitemData")
			this.name=uni.getStorageSync("MendianitemData").name
			console.log(this.form);
			this.addss=this.form.province+'-'+this.form.city+'-'+this.form.district
			this.address_component=this.form
			this.address_component.name=this.form.wname
			
			uni.setNavigationBarTitle({
			    title: '修改门店'
			});
		},
		onShow() {
			
		},
		methods:{
			opdt(){
				uni.hideKeyboard()
				var this_=this
				uni.chooseLocation({
				    success: function (res) {
						this_.getmap(res)
				    }
				});
			},
			async getmap(resdata){
				uni.showLoading({
				    title: '加载中'
				});
				let data = {'latitude':resdata.latitude,'longitude':resdata.longitude}
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				let [err,res] =await this.$httpas.post('/api/user/getmap',data);
				if (!this.$httpas.errorCheck(err,res)) return;
				setTimeout(function() {
				    uni.hideLoading();  
				},300)
				console.log(res.data);
				if(res.data.address_component){
					if(resdata.name=='地图位置'){
						resdata.name=''
					}
					this.address_component=resdata
					this.address_component.province=res.data.address_component.province;
					this.address_component.city=res.data.address_component.city;
					this.address_component.district=res.data.address_component.district;
					this.addss=this.address_component.province+'-'+this.address_component.city+'-'+this.address_component.district
					if(res.data.formatted_addresses.recommend){
						this.address_component.address=res.data.formatted_addresses.recommend+' '+resdata.name
					}
					console.log(this.address_component);
				}else{
					uni.showToast({ title: '地址接口解析错误',icon:"none" });
				}
				
			},
			changeDefault(){
				this.form.is_default = this.form.is_default == 0 ? 1 : 0;
			},
			onChangeRegion(region) {
				this.form.province=region[0].name
				this.form.city=region[1].name
				this.form.district=region[2].name
				
				console.log(this.form);
			},
			async postdata(){
				let _this=this;
				let data = this.form;
				data.province=this.address_component.province
				data.city=this.address_component.city
				data.district=this.address_component.district
				data.address=this.address_component.address
				data.wname=this.address_component.name
				data.latitude=this.address_component.latitude
				data.longitude=this.address_component.longitude
				data.name=this.name
				if(!data.mname){
					uni.showToast({ title: '请填写门店名字',icon:"none" });
					return
				}
				if(!data.name){
					uni.showToast({ title: '请填写名字',icon:"none" });
					return
				}
				if(!data.tel){
					uni.showToast({ title: '请填写电话',icon:"none" });
					return
				}
				if(!data.province){
					uni.showToast({ title: '请选择省',icon:"none" });
					return
				}
				if(!data.city){
					uni.showToast({ title: '请选择市',icon:"none" });
					return
				}
				if(!data.district){
					uni.showToast({ title: '请选择区/县',icon:"none" });
					return
				}
				if(!data.address){
					uni.showToast({ title: '请填写详细地址',icon:"none" });
					return
				}
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				
				let [err,res] =await this.$httpas.post('/api/user/mendianadd',data);
				if (!this.$httpas.errorCheck(err,res)) return;
			
				if(res.data.code === 1){
					uni.showModal({
						title: '',
						content: res.data.msg,
						showCancel: false,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								uni.navigateBack();
							} else if (res.cancel) {
								
							}
						}
					});
				}else{
					uni.showToast({ title: res.data.msg,icon:"none" });
				}
			},
			

		}
	}
</script>

<style>
	.row {
		display: flex;
		height: 100upx;
		align-items: center;
		color: #040506;
		border-bottom: 1upx solid rgba($color: #707070, $alpha: 0.3);
	}
	
	.row:active {
		opacity: 0.8;
	}
	.inputh{
		height: 100upx;
	}
	.name {
		flex-shrink: 0;
	}
	
	.value {
		flex: 1;
	}
	
	.right-icon {
		color: #707070;
	}
</style>